<!--
 * @Author: your name
 * @Date: 2021-01-04 09:50:30
 * @LastEditTime: 2021-01-26 19:21:11
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \yellow-member-admin\src\page\add-video\index.vue
-->
<template>
  <div class="img-list">
    <Breadcrumb :navList="['图片管理','图片列表']"></Breadcrumb>
    <el-table :data="imgList" style="width: 100%">
      <el-table-column label="序号" type="index" width="80"></el-table-column>
      <el-table-column label="标题" prop="img_name" width="280"></el-table-column>
      <el-table-column label="地址" prop="img_path" >
      </el-table-column>
      <el-table-column prop="img_path" label="封面" width="150">
        <template slot-scope="scope">
          <el-image
            :src="`${IMGPATH}/${scope.row.img_path}`"
            :preview-src-list="[
              `${IMGPATH}/${scope.row.img_path}`,
            ]"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          <el-popconfirm
            @onConfirm="addSwiper(scope.row.id)"
            title="确定要该图片设为轮播吗"
          >
            <el-button slot="reference" type="primary">添加为轮播图</el-button>
          </el-popconfirm>
          <el-button type="danger" @click="delImg(scope.row.id,scope.row.img_name)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="+total"
      @current-change="handleCurrentChange"
      :page-size="10"
    >
    </el-pagination>
  </div>
</template>
<script>

export default {
  // name: "add-video",
  data() {
    return {
      imgList: [],
      total: "",
    };
  },
  created(){
    this.getImgList()
  },
  methods: {
    // 获取图片列表
    async getImgList() {
      const {code,data} = await this.$api.common.getImgList()
      if(!code){
           this.imgList = data
      }
    },
    
    //删除图片
    async delImg(img_id,img_name) {
       const { code , msg } = await this.$api.deleteImg({
        img_id,
        img_name
      });
      if (!code) {
        this.$message.success(msg);
        this.getImgList();
      } 
    },
    // 点击分页触发
    handleCurrentChange(val) {
    /*   this.getVideoList({
        page:val
      }) */
    },
  }
};
</script>
<style lang='scss' scoped>
.img-list {
  .el-tag {
    margin-top: 3px;
    margin-left: 10px;
  }
  .el-image{
    width:100%
  }
}
</style>